<template>
	<view class="index-input">
		<u-popup v-model="show" mode="center" height="780upx" width="638upx" border-radius="10" :closeable="true" close-icon-color="#0081F1">
			<view style="padding: 3%">
				<view class="font-30" style="color: #333333;">筛选</view>
				<view class="font-26" style="margin-top: 40upx;margin-left: 30upx;">分发时间：</view>
				<view style="display: flex;margin-top: 19upx;">
					<view class="time" @click="showTime = true">{{ timeOne }}</view> <text style="position: relative;left: 10upx;top:5upx">-</text><view class="time" @click="showTimeTwo = true">{{ timeTwo }}</view>
				</view>
				<u-picker v-model="showTime" mode="time" :params="params" @confirm="confirm"></u-picker>
				<u-picker v-model="showTimeTwo" mode="time" :params="params" @confirm="confirms"></u-picker>
				<view style="display: flex;padding-left: 20upx;padding-right: 20upx;">
					<view>
						<view class="font-26" style="margin-top: 40upx;margin-left: 10upx;">工单ID：</view>
						<view style="display: flex;margin-top: 19upx;">
							<u-input v-model="list.unique_id" :type="type" :border="border" :placeholder="mobile" height="54" />	
						</view>
					</view>
					<view>
						<view class="font-26" style="margin-top: 40upx;margin-left: 30upx;">发起人：</view>
						<view style="display: flex;margin-top: 19upx;margin-left: 30upx;">
							<u-input v-model="list.realname" :type="type" :border="border" :placeholder="mobile" height="54" />	
						</view>
					</view>
				</view>
				<view class="font-26" style="margin-left: 25upx;margin-top: 30upx;">工单类型：</view>
				<view style="display: flex;margin-left: 15upx;margin-top: 10upx;">
					<view :class="list.type == 1 ? 'btn-ff' : 'btn'" @click="list.type = '1'">跟单类型</view>
					<view :class="list.type == 2 ? 'btn-ff' : 'btn'" @click="list.type = '2'">废单类型</view>
					<view :class="list.type == 3 ? 'btn-ff' : 'btn'" @click="list.type = '3'">投诉类型</view>
				</view>
				<view class="font-26" style="margin-left: 25upx;margin-top: 20upx;">状态：</view>
				<view style="display: flex;margin-left: 15upx;margin-top: 20upx;">
					<view :class="list.status == 0 ? 'btn-ff' : 'btn'" @click="list.status = '0'">待处理</view>
					<view :class="list.status == 1 ? 'btn-ff' : 'btn'" @click="list.status = '1'">处理中</view>
					<view :class="list.status == 2 ? 'btn-ff' : 'btn'" @click="list.status = '2'">已处理</view>
				</view>
				<view></view>
				<view style="display: flex;justify-content: space-around;margin-top:60upx;">
					<view class="last" style="background-color: rgb(238,238,238);color: #999999;" @click="reset">重置条件</view>
					<view class="last" style="background-color: rgb(0,129,241);color: #FFFFFF;" @click="gitList()">确认</view>
				</view>
			</view>
			</u-popup>
							<!-- > -->
		</u-popup>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				showTimeTwo: false,
				showTime: false,
				list: {
					create_time: [],
					realname: '',
					unique_id: '',
					type: '1',
					status: '0',
					page: 1,
					limit: 10
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				value: '',
				type: 'text',
				border: true,
				show: false,
				mobile: '请输入',
				name: '语言培训-通用英语-成人新概念英语',
				timeOne: '',
				timeTwo: ''
			}
		},
		methods:{
			reset () {
				this.list =  {
					create_time: [],
					realname: '',
					unique_id: '',
					type: '1',
					status: '0',
					page: 1,
					limit: 10
				}
			},
			judge () {
				if(this.list.create_time.length !== 2) {
					uni.showToast({
					    title: '请填写完整',
						icon: 'none',
					    duration: 2000
					});
					return false
				} else if (this.list.realname == '') {
					uni.showToast({
					    title: '请填写完整',
						icon: 'none',
					    duration: 2000
					});
					return false
				} else if (this.list.unique_id == '') {
					uni.showToast({
					    title: '请填写完整',
						icon: 'none',
					    duration: 2000
					});
					return false
				}
				return true
			},
			confirm (e) {
				this.timeOne = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
				this.list.create_time.push(e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second)
			},
			confirms (e) {
				this.timeTwo = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
				this.list.create_time.push(e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second)
			},
			getOpen (){
				this.show = true
			},
			gitList () {
				if (this.judge() == true) {
					this.$emit('getlist', this.list)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.last{
		width: 240upx;
		height: 64upx;
		line-height: 64upx;
		text-align: center;
		line-height: 64upx;
		border-radius: 10upx;
	}
	.btn{
		width: 125upx;
		height: 49upx;
		background: rgba(220, 234, 251, 0.3);
		border-radius: 8upx;
		text-align: center;
		line-height: 49upx;
		font-size: 26upx;
		margin-left: 10upx;
	}
	.font-30{
		font-size: 30upx;
		font-weight: bold;
	}
	.font-26{
		font-size: 26upx;
	}
	.time{
		width: 260upx;
		height: 54upx;
		border: 1upx solid #DCDCDC;
		text-align: center;
		line-height: 54upx;
		margin-left: 25upx;
		font-size: 22upx;
	}
	.btn-ff{
		width: 125upx;
		height: 49upx;
		background: rgba(0, 129, 241, 1);
		border-radius: 8upx;
		text-align: center;
		line-height: 49upx;
		font-size: 26upx;
		margin-left: 10upx;
		color: #FFFFFF;
	}
</style>
